{% extends 'base.html' %}
{% load static from staticfiles %}

{% block css_content %}
    <link rel="stylesheet" type="text/css" media="all" href="{% static "daterangepicker/daterangepicker-bs3.css" %}"/>
    <link href="{% static "stylesheets/select2.css" %}" media="all" rel="stylesheet" type="text/css"/>
    <style type="text/css">
    </style>
{% endblock %}

{% if isExists %}
{% block pbreadcrumbs_content %}
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="ace-icon fa fa-home home-icon"></i>
                <a href="{% url "manage.views.service" %}">service</a>
            </li>

            <li>
                {{ service }}
            </li>
        </ul><!-- /.breadcrumb -->
    </div>
{% endblock %}
{% endif %}

{% block page_content %}
    {% if isExists %}


        <div class="tabbable">
            <ul class="inbox-tabs nav nav-tabs padding-16 tab-size-bigger tab-space-1" id="myTab">
                <!-- #section:pages/inbox.compose-btn -->
                {% if isOperate and perms.manage.admin_task %}
                <li class="li-new-mail pull-right">
                    <a id="addServerBtn" data-toggle="tab" href="#write" data-target="write" class="btn-new-mail">
                        <span class="btn btn-purple no-border">
                            <i class="glyphicon-plus bigger-130"></i>
                            <span class="bigger-110">新建server</span>
                        </span>
                    </a>
                </li><!-- /.li-new-mail -->
                {% endif %}
                <li class="active">
                    <a data-toggle="tab" href="#servers-tab">
                        <i class="green ace-icon fa fa-hdd-o bigger-120"></i>
                        servers
                    </a>
                </li>

                <li>
                    <a data-toggle="tab" href="#clients-tab">
                        <i class="green ace-icon fa fa-users bigger-120"></i>
                        clients
                    </a>
                </li>
            </ul>

            <div class="tab-content">
                <div id="servers-tab" class="tab-pane in active">
                    <div class="row">
                        <div class="col-sm-12 infobox-container">
                            <!-- #section:pages/dashboard.infobox.dark -->
                            <div class="infobox infobox-green">
                                <div class="infobox-icon">
                                    <i class="ace-icon fa fa-sort-amount-asc"></i>
                                </div>

                                <div class="infobox-data">
                                    <span class="infobox-data-number">{{ servers_total.mintime|floatformat:3 }}</span>
                                    <div class="infobox-content">最小响应时间(ms)</div>
                                </div>
                                <!-- #section:pages/dashboard.infobox.stat -->
                                <!-- /section:pages/dashboard.infobox.stat -->
                            </div>

                            <div class="infobox infobox-blue">
                                <div class="infobox-icon">
                                    <i class="ace-icon fa fa-sort-amount-desc"></i>
                                </div>

                                <div class="infobox-data">
                                    <span class="infobox-data-number">{{ servers_total.maxtime|floatformat:3  }}</span>
                                    <div class="infobox-content">最大响应时间(ms)</div>
                                </div>


                            </div>

                            <div class="infobox infobox-pink">
                                <div class="infobox-icon">
                                    <i class="ace-icon fa fa-bar-chart-o"></i>
                                </div>

                                <div class="infobox-data">
                                    <span class="infobox-data-number">{{ servers_total.avgtime|floatformat:3  }}</span>
                                    <div class="infobox-content">平均响应时间(ms)</div>
                                </div>
                            </div>

                            <div class="infobox infobox-red">
                                <div class="infobox-icon">
                                    <i class="ace-icon fa fa-users"></i>
                                </div>

                                <div class="infobox-data">
                                    <span class="infobox-data-number">{{ servers_total.qps|floatformat:3  }}</span>
                                    <div class="infobox-content">平均访问次数(次/s)</div>
                                </div>
                            </div>

                            <div class="infobox infobox-orange2">
                                <!-- #section:pages/dashboard.infobox.sparkline -->
                                <div class="infobox-icon">
                                    <i class="ace-icon fa fa-leaf"></i>
                                </div>

                                <!-- /section:pages/dashboard.infobox.sparkline -->
                                <div class="infobox-data">
                                    <span class="infobox-data-number">{{ servers_total.success|floatformat:0  }}</span>
                                    <div class="infobox-content">成功次数(次)</div>
                                </div>


                            </div>

                            <div class="infobox infobox-blue2">
                                 <div class="infobox-icon">
                                    <i class="ace-icon fa fa-exclamation-circle"></i>
                                </div>

                                <div class="infobox-data">
                                    <span class="infobox-text">{{ servers_total.failure|floatformat:0  }}</span>

                                    <div class="infobox-content">
                                         失败次数(次)
                                    </div>

                                </div>
                                 <span class="badge" data-toggle="tooltip" data-placement="left" title id="show-option" data-original-title="最小响应时间=请求的响应时间的最小值,最大响应时间=请求的响应时间的最大值,平均响应时间=请求的响应时间的平均值"><i class="fa fa-question-circle" ></i></span>
                            </div>
                            <!-- /section:pages/dashboard.infobox.dark -->
                        </div>
                    </div>
                    <table id="servers-table" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>
                                server地址
                            </th>
                            <th>
                                名称
                            </th>
                            <th class="hidden-xs">
                                负责人
                            </th>
                            <th class="hidden-xs">
                                底层协议
                            </th>
                            <th class="hidden-xs">
                                创建时间
                            </th>
                            <th class="hidden-xs">
                                操作
                            </th>
                        </tr>
                    </thead>
                </table>
                </div>

                <div id="clients-tab" class="tab-pane">
                    <div class="row">
                    <div class="col-sm-12 infobox-container">
                        <!-- #section:pages/dashboard.infobox.dark -->
                        <div class="infobox infobox-green">
                            <div class="infobox-icon">
                                <i class="ace-icon fa fa-sort-amount-asc"></i>
                            </div>

                            <div class="infobox-data">
                                <span class="infobox-data-number">{{ clients_total.mintime|floatformat:3  }}</span>
                                <div class="infobox-content">最小响应时间(ms)</div>
                            </div>
                            <!-- #section:pages/dashboard.infobox.stat -->
                            <!-- /section:pages/dashboard.infobox.stat -->
                        </div>

                        <div class="infobox infobox-blue">
                            <div class="infobox-icon">
                                <i class="ace-icon fa fa-sort-amount-desc"></i>
                            </div>

                            <div class="infobox-data">
                                <span class="infobox-data-number">{{ clients_total.maxtime|floatformat:3  }}</span>
                                <div class="infobox-content">最大响应时间(ms)</div>
                            </div>


                        </div>

                        <div class="infobox infobox-pink">
                            <div class="infobox-icon">
                                <i class="ace-icon fa fa-bar-chart-o"></i>
                            </div>

                            <div class="infobox-data">
                                <span class="infobox-data-number">{{ clients_total.avgtime|floatformat:3  }}</span>
                                <div class="infobox-content">平均响应时间(ms)</div>
                            </div>
                        </div>

                        <div class="infobox infobox-red">
                            <div class="infobox-icon">
                                <i class="ace-icon fa fa-users"></i>
                            </div>

                            <div class="infobox-data">
                                <span class="infobox-data-number">{{ clients_total.qps|floatformat:3  }}</span>
                                <div class="infobox-content">平均访问次数(次/s)</div>
                            </div>
                        </div>

                        <div class="infobox infobox-orange2">
                            <!-- #section:pages/dashboard.infobox.sparkline -->
                            <div class="infobox-icon">
                                <i class="ace-icon fa fa-leaf"></i>
                            </div>

                            <!-- /section:pages/dashboard.infobox.sparkline -->
                            <div class="infobox-data">
                                <span class="infobox-data-number">{{ clients_total.success|floatformat:0  }}</span>
                                <div class="infobox-content">成功次数(次)</div>
                            </div>


                        </div>

                        <div class="infobox infobox-blue2">
                             <div class="infobox-icon">
                                <i class="ace-icon fa fa-exclamation-circle"></i>
                            </div>

                            <div class="infobox-data">
                                <span class="infobox-text">{{ clients_total.failure|floatformat:0  }}</span>

                                <div class="infobox-content">
                                     失败次数(次)
                                </div>
                            </div>
                            <span class="badge" data-toggle="tooltip" data-placement="left" title id="show-option" data-original-title="合计数据均由所有子客户端数据合计平均后求得"><i class="fa fa-question-circle" ></i></span>
                        </div>
                        <!-- /section:pages/dashboard.infobox.dark -->
                    </div>
                    </div>
                    <table id="clients-table" class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>
                                    clients地址
                                </th>
                                <th>
                                    名称
                                </th>
                                <th class="hidden-xs">
                                    负责人
                                </th>
                                <th class="hidden-xs">
                                    底层协议
                                </th>
                                <th class="hidden-xs">
                                    创建时间
                                </th>
                                <th class="hidden-xs">
                                    操作
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal fade" id="addServer" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">新建server</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning">
                            server地址格式为：ip:port(如192.168.1.1:19090)
                        </div>
                        <form>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">service地址:</label>
                                <input type="text" class="form-control" id="server">
                            </div>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">名称:</label>
                                <input type="text" class="form-control" id="server_name">
                            </div>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">责任人:</label>
                                <input type="text" class="form-control" id="server_owner">
                            </div>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">底层协议:</label>
                                <select class="form-control" id="server_protocol">
                                    <option value="thrift">thrift</option>
                                    <option value="avro">avro</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" id="create_server" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="harpc_log" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" style="width: 100%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <form class="form-horizontal modal-title">
                            <div class="input-prepend input-group">
                    <span class="add-on input-group-addon"><i
                            class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
                                <input type="text" style="width: 400px" name="reservation"
                                       id="reservationtime"
                                       class="form-control"
                                       class="span4"/>
                            </div>
                        </form>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-sm-12 infobox-container">
                                <!-- #section:pages/dashboard.infobox.dark -->
                                <div class="infobox infobox-green">
                                    <div class="infobox-icon">
                                        <i class="ace-icon fa fa-sort-amount-asc"></i>
                                    </div>

                                    <div class="infobox-data">
                                        <span class="infobox-data-number" id='log_total_mintime'>0.00</span>
                                        <div class="infobox-content">最小响应时间(ms)</div>
                                    </div>
                                    <!-- #section:pages/dashboard.infobox.stat -->
                                    <!-- /section:pages/dashboard.infobox.stat -->
                                </div>

                                <div class="infobox infobox-blue">
                                    <div class="infobox-icon">
                                        <i class="ace-icon fa fa-sort-amount-desc"></i>
                                    </div>

                                    <div class="infobox-data">
                                        <span class="infobox-data-number" id='log_total_maxtime'>0.00</span>
                                        <div class="infobox-content">最大响应时间(ms)</div>
                                    </div>


                                </div>

                                <div class="infobox infobox-pink">
                                    <div class="infobox-icon">
                                        <i class="ace-icon fa fa-bar-chart-o"></i>
                                    </div>

                                    <div class="infobox-data">
                                        <span class="infobox-data-number" id="log_total_avgtime">0.00</span>
                                        <div class="infobox-content">平均响应时间(ms)</div>
                                    </div>
                                </div>

                                <div class="infobox infobox-red">
                                    <div class="infobox-icon">
                                        <i class="ace-icon fa fa-users"></i>
                                    </div>

                                    <div class="infobox-data">
                                        <span class="infobox-data-number" id="log_total_qps">0.00</span>
                                        <div class="infobox-content">平均访问次数(次/s)</div>
                                    </div>
                                </div>

                                <div class="infobox infobox-orange2">
                                    <!-- #section:pages/dashboard.infobox.sparkline -->
                                    <div class="infobox-icon">
                                        <i class="ace-icon fa fa-leaf"></i>
                                    </div>

                                    <!-- /section:pages/dashboard.infobox.sparkline -->
                                    <div class="infobox-data">
                                        <span class="infobox-data-number" id="log_total_success">0</span>
                                        <div class="infobox-content">成功次数(次)</div>
                                    </div>


                                </div>

                                <div class="infobox infobox-blue2">
                                     <div class="infobox-icon">
                                        <i class="ace-icon fa fa-exclamation-circle"></i>
                                    </div>

                                    <div class="infobox-data">
                                        <span class="infobox-text" id="log_total_failure">0</span>

                                        <div class="infobox-content">
                                             失败次数(次)
                                        </div>

                                    </div>
                                     <span class="badge" data-toggle="tooltip" data-placement="left" title id="show-option" data-original-title="最小响应时间=请求的响应时间的最小值,最大响应时间=请求的响应时间的最大值,平均响应时间=请求的响应时间的平均值"><i class="fa fa-question-circle" ></i></span>
                                </div>
                                <!-- /section:pages/dashboard.infobox.dark -->
                            </div>
                        </div>
                        <table id="log_table" class="table table-striped table-bordered" cellpadding="0" cellspacing="0"
                               class="display" border="0" style="word-wrap: break-word;word-break: break-all;"
                               width="100%">
                            <thead>
                            <tr>
                                <th>日志时间</th>
                                <th>平均响应时间</th>
                                <th>最小响应时间</th>
                                <th>最大响应时间</th>
                                <th>每秒请求次数</th>
                                <th>成功次数</th>
                                <th>失败次数</th>
                            </tr>
                            </thead>
                        </table>
                        <div id="log_chart"></div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary"
                                data-dismiss="modal">
                            确认
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>


    {% else %}
            <div class="widget-box">
                <div class="widget-header">
                    <h5 class="widget-title">server&clients</h5>

                </div>

                <div class="widget-body">
                    <div class="widget-main">
                        <div class="alert alert-block alert-success">
                            <button type="button" class="close" data-dismiss="alert">
                                <i class="ace-icon fa fa-times"></i>
                            </button>

                            <i class="ace-icon fa fa-check green"></i>
                            您需要选择一个存在的并有效service，才能查看其中的servers和clients
                        </div>

                        <form class="form-horizontal" action="{% url "manage.views.child" %}" role="form">
                            <!-- #section:elements.form -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> serivce </label>

                                <div class="col-sm-9">
                                    <select class="select2able" name="service" style="min-width:500px">
                                        {% for service in services %}
                                            <option value="{{ service.0 }}">{{ service.0 }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="clearfix form-actions">
                                <div class="col-md-offset-3 col-md-9">
                                    <button class="btn btn-info" type="submit">
                                        <i class="ace-icon fa fa-check bigger-110"></i>
                                        确认
                                    </button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
    {% endif %}
{% endblock %}

{% block js_content %}
    {% if isExists %}
        <script src="{% static "daterangepicker/moment.js" %}" type="text/javascript"></script>
        <script src="{% static "daterangepicker/daterangepicker.js" %}" type="text/javascript"></script>
        <script type="text/javascript" src="{% static "layer/layer.js" %}"></script>
        <script type="text/javascript" src="{% static "highchart/highcharts.js" %}"></script>
        <script type="text/javascript" src="{% static "highchart/modules/exporting.js" %}"></script>
        <script src="{% static "javascripts/jquery.dataTables.min.js" %}" type="text/javascript"></script>
	    <script src="{% static "js/jquery.dataTables.bootstrap.js"%}"></script>
        <script type="text/javascript" src="{% static "js/moment.js" %}"></script>
        <script type="text/javascript">
            $( ".badge" ).tooltip();
            var serversTable = $("#servers-table").DataTable({
                "sPaginationType": "full_numbers",
                "language": {
                    url: "{% static 'datatable/Chinese.json' %}"
                },
                "ajax": {
                    url: "{% url 'manage.views.ajax_servers' %}",
                    type: "POST",
                    data: {
                        'service': '{{ service }}'
                    }
                },
                "columns": [
                    {
                        "sWidth": "20%"
                    },
                    {"sWidth": "15%"},
                    {"sWidth": "15%"},
                    {"sWidth": "15%"},
                    {"sWidth": "15%"},
                    {"sWidth": "15%"},
                ],
                "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            if (data == true) {
                                return '<div class="hidden-sm hidden-xs action-buttons">' +
                                        '<a class="blue" onclick="log(\'{{ service }}\',\'servers\',\'' + row[0] + '\')" style=\"cursor:pointer;\" ><i class="icon-eye-open"></i>查看</a>' +
                                        {% if  perms.manage.admin_task %}
                                        '<a class="red" onclick="delete_server(\'{{ service }}\',\'' + row[0] + '\')" style=\"cursor:pointer;\" ><i class="icon-trash"></i>删除</a>' +
                                        {% endif %}
                                        '</div>';
                            } else {
                                return '<div class="hidden-sm hidden-xs action-buttons">' +
                                        '<a class="blue" onclick="log(\'{{ service }}\',\'servers\',\'' + row[0] + '\')" style=\"cursor:pointer;\" ><i class="icon-eye-open"></i>查看</a>' +
                                        '</div>';
                                ;
                            }
                        },
                        "targets": 5
                    },
                ]
            });

            $("#addServerBtn").click(function () {
                $("#server").val("");
                $('#addServer').modal('show');
            });

            $("#create_server").click(function () {
                var index = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });

                $.ajax({
                    url: '{% url "manage.views.ajax_create_server" %}',
                    method: 'POST',
                    data: {
                        'service': '{{ service }}',
                        'server': $("#server").val(),
                        'server_name':$("#server_name").val(),
                        'server_owner':$("#server_owner").val(),
                        'server_protocol':$("#server_protocol").val()
                    },
                    success: function (data) {
                        //layer.msg(data['msg'], {icon: 2});
                        if (data['rc'] == 0) {
                            $('#addServer').modal('hide')
                            layer.msg(data['msg'], {icon: 1});
                            //window.location.replace("{% url 'manage.views.index' %}?msg=节点添加成功!");
                            serversTable.ajax.reload()
                        } else {
                            layer.msg(data['msg'], {icon: 2});

                        }
                        layer.close(index);
                    },
                    error: function () {
                        layer.msg('服务器内部异常', {icon: 2});
                        layer.close(index);
                    }
                });
            });

            function delete_server(service, server) {
                layer.confirm('是否删除' + server + '节点？', {
                    btn: ['删除', '取消'], //按钮
                    shade: false //不显示遮罩
                }, function () {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: '{% url 'manage.views.ajax_delete' %}',
                        data: {
                            'service': service,
                            'server': server
                        },
                        method: 'POST',
                        success: function (data) {
                            //layer.msg(data['msg'], {icon: 2});
                            if (data['rc'] == 0) {
                                serversTable.ajax.reload()
                                layer.msg(data['msg'], {icon: 1});
                                //window.location.replace("{% url 'manage.views.index' %}?msg=节点删除成功!");
                            } else {
                                layer.msg(data['msg'], {icon: 2});
                                layer.close(index);
                            }
                            layer.close(index);
                        },
                        error: function () {
                            layer.msg('服务器内部异常', {icon: 2});
                            layer.close(index);
                        }
                    })
                }, function () {
                });


            }

            var global_service;
            var global_type;
            var global_key;

            function log(service, type, key) {
                global_service = service;
                global_type = type;
                global_key = key;
                $('#harpc_log').modal('show');

            }
            $('#harpc_log').on('shown.bs.modal', function () {
                initdatadaterangepicker(global_service, global_key, global_type);
                initTable(global_service, global_key, global_type, $('#reservationtime').data('daterangepicker').startDate.format('YYYYMMDDHHmmss'), $('#reservationtime').data('daterangepicker').endDate.format('YYYYMMDDHHmmss'));
                var chart = $('#log_chart').highcharts();
                //chart.reflow();
            })

            function initdatadaterangepicker(service, key, type) {
                $('#reservationtime').val(moment().add('days', -7).format('MM/DD/YYYY h:mm A') + " - " + moment().format('MM/DD/YYYY h:mm A'));
                $('#reservationtime').daterangepicker({
                    timePicker: true,
                    timePickerIncrement: 1,

                    format: 'MM/DD/YYYY h:mm A',
                }, function (start, end, label) {
                    initTable(service, key, type, start.format('YYYYMMDDHHmmss'), end.format('YYYYMMDDHHmmss'));
                });
            }

            var table = null;
            function initTable(service, key, type, start, end) {
                $.ajax({
                    url: "{% url 'manage.views.ajax_harpc_log' %}",
                    method: 'POST',
                    data: {
                        'service': service,
                        'key': key,
                        'type': type,
                        'start': start,
                        'end': end
                    },
                    success: function (data) {
                        if (table != null) {
                            table.destroy();
                        }
                        table = $('#log_table').DataTable({
                            "sPaginationType": "full_numbers",
                            language: {
                                url: "{% static 'datatable/Chinese.json' %}"
                            },
                            "aaData": data['tables'],
                            "columnDefs": [{
                                "render": function (data, type, row) {
                                    if (data == 'total') {
                                        return '合计'
                                    } else {
                                        return moment(data,'YYYYMMDDHHmmss').format('YYYY/MM/DD HH:mm:ss');
                                    }
                                    return data;
                                },
                                "type": "html-percent",
                                "targets": 0
                            }],
                            "columns": [
                                {
                                    "sWidth": "15%"
                                },
                                {"sWidth": "15%"},
                                {"sWidth": "15%"},
                                {"sWidth": "15%"},
                                {"sWidth": "15%"},
                                {"sWidth": "15%"},
                                {"sWidth": "10%"},
                            ],
                            "fnDrawCallback": function (oSettings) {
                            },
                            "order": [[0, "desc"]]

                        });
                        var series = data['series'];
                        for (index in series) {
                            var serie = series[index];
                            var serie_datas = serie['data'];
                            for (i in serie_datas) {
                                var serie_data = serie_datas[i];
                                var date = Date.UTC(serie_data[0], serie_data[1], serie_data[2], serie_data[3], serie_data[4], serie_data[5]);
                                var value = serie_data[6];
                                series[index]['data'][i] = [date, value];
                            }
                        }
                        if (series.length > 0) {
                            $('#log_chart').highcharts({
                                chart: {
                                    type: 'spline'
                                },
                                title: {
                                    text: '节点日志趋势图'
                                },
                                subtitle: {
                                    text: '数据来源harpc_admin'
                                },
                                xAxis: {
                                    type: 'datetime',
                                    dateTimeLabelFormats: { // don't display the dummy year
                                        second: '%H:%M:%S',
                                        minute: '%H:%M',
                                        hour: '%H:%M',
                                        day: '%e. %b',
                                        week: '%e. %b',
                                        month: '%b \'%y',
                                        year: '%Y'
                                    }
                                },
                                yAxis: [{
                                    title: {
                                        text: 'ms'
                                    },
                                    min: 0
                                }, {
                                    title: {
                                        text: '次'
                                    },
                                    min: 0,
                                    opposite: true
                                }
                                ],
                                tooltip: {
                                    formatter: function () {
                                        return '<b>' + this.series.name + '</b><br>' +
                                                Highcharts.dateFormat('%b/%e %H:%M:%S', this.x) + ' value= ' + this.y;
                                    }
                                },

                                series: series
                            });
                            var chart = $('#log_chart').highcharts();
                            var series_chart = chart.series;
                            for (var i = 1, len = series_chart.length; i < len; i++) {
                                series_chart[i].hide();
                            }
                        } else {
                            $('#log_chart').empty();
                        }
                        var total = data['total'];
                        $("#log_total_maxtime").html(total['maxtime'].toFixed(3));
                        $("#log_total_mintime").html(total['mintime'].toFixed(3));
                        $("#log_total_avgtime").html(total['avgtime'].toFixed(3));
                        $("#log_total_qps").html(total['qps'].toFixed(3));
                        $("#log_total_success").html(total['success'].toFixed(0));
                        $("#log_total_failure").html(total['failure'].toFixed(0));
                    },
                    error: function () {
                        layer.msg('服务器内部异常', {icon: 2});
                    }
                });
            }

            //==========================clients==================================================

            var clientsTable = $("#clients-table").DataTable({
                "sPaginationType": "full_numbers",
                "language": {
                    url: "{% static 'datatable/Chinese.json' %}"
                },
                "ajax": {
                    url: "{% url 'manage.views.ajax_clients' %}",
                    type: "POST",
                    data: {
                        'service': '{{ service }}'
                    }
                },
                "columns": [
                    {
                        "sWidth": "20%"
                    },
                    {"sWidth": "15%"},
                    {"sWidth": "15%"},
                    {"sWidth": "15%"},
                    {"sWidth": "15%"},
                    {"sWidth": "15%"},
                ],
                "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            return '<div class="hidden-sm hidden-xs action-buttons">' +
                                    '<a class="blue" onclick="log(\'{{ service }}\',\'clients\',\'' + row[0] + '\')" style=\"cursor:pointer;\" ><i class="icon-eye-open"></i>查看</a>' +
                                    '</div>';
                        },
                        "targets": 5
                    },
                ]
            });

        </script>
    {% else %}

        <script src="{% static "javascripts/select2.js" %}" type="text/javascript"></script>
        <script type="text/javascript">
            $('.select2able').select2();
        </script>
    {% endif %}
{% endblock %}